// Set the global compass vars.
$legacy-support-for-ie6: false;
$legacy-support-for-ie7: false;
$legacy-support-for-ie8: true;
$legacy-support-for-mozilla: false;
// Import the normalize plugin
// @import "normalize";
// @import "compass/css3";

$ppr: 750px/16/1rem; // pixel per rem

@mixin box-sizing($boxsizing){
  box-sizing: $boxsizing;
}
@mixin border-radius($radius){
  -webkit-border-radius: $radius;
  border-radius: $radius;
}
@mixin border-corner-radius($radius...){
  -webkit-border-corner-radius: $radius;
  border-corner-radius: $radius;
}
@mixin box-shadow($shadow...) {
  -webkit-box-shadow:$shadow;
  box-shadow:$shadow;
}

*{
  margin: 0;
  padding: 0;
  @include box-sizing(border-box);
  -webkit-text-size-adjust: none;
  -webkit-tap-highlight-color:rgba(0,0,0,0);
}
input:-webkit-autofill{-webkit-box-shadow: 0 0 0px 1000px white inset;}

html{
  font-size: $ppr*1rem;
  height: 100%;
  background: #f1f1f1;
}
body {
  //width: 750px/$ppr;
  //max-width: 750px/$ppr;
  height: 100%;
  //margin: 0 auto;
  font-family: Helvetica,PingFangSC-Regular,"Droid Sans",Arial,sans-serif;
  font-size: 16px/$ppr;
  line-height: 1;
  color: #232326;
  overflow-x: hidden;
}
ul,li{
  list-style: none;
}
input,select{
  outline: none;
}
a{
  color: #232326;
  text-decoration: none;
  vertical-align: middle;
}
i,em{
  font-style: normal;
}
span,img{
  vertical-align: middle;
}
.clear{
  clear:both;
}
.p:before,.p:after{
  content: "";
  clear: both;
  display: block;
  font-size: 0;
  height: 0;
}
.fl{float: left;}
.fr{float: right;}

@mixin line($w:0){
  max-width: $w;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
@mixin position($p,$top:0px,$left:0px,$bottom:0px,$right:0px){
  position:$p;
  top:$top/$ppr;
  left: $left/$ppr;
  bottom:$bottom/$ppr;
  right: $right/$ppr;
};
@mixin background-color($colour){
  background-color: $colour;
};
@mixin padding($fx,$be:2px){
  padding-#{$fx}: $be/$ppr;
};

$num14:14px/$ppr;
$num16:16px/$ppr;
$num20:20px/$ppr;
$num24:24px/$ppr;
$num26:26px/$ppr;
$num28:28px/$ppr;
$num30:30px/$ppr;
$num36:36px/$ppr;
$num40:40px/$ppr;
$num48:48px/$ppr;
$num60:60px/$ppr;
$num80:80px/$ppr;

$theme:#aa0231;

.order_info2{
  display: none;
}
.main{
  height: 100%;
  .top{
    width: 100%;
    height: 84px/$ppr;
    line-height: 84px/$ppr;
    background: $theme;
    text-align: center;
    color: #fff;
    font-size: $num30;
    position: fixed;
    top: 0;
    z-index: 1;
    a{
      font-size: $num26;
      color: #fff;
      position: absolute;
      left: $num60;
      bottom: 0;
      line-height: 84px/$ppr;
      img{
        width: $num28;
        vertical-align: text-top;
      }
      &.right{
        left: unset;
        right: $num30;
      }
    }
  }
  .login-top{
    background: transparent;
    a{
      color: #666;
      left: $num30;
    }
  }
  .container{
    padding-top: 80px/$ppr;
  }
  .s-title{
    font-size: $num26;
    color: #999;
    padding: 20px/$ppr $num60;
  }
  .submit{
    position: fixed;
    bottom: 0;
    left: 0;
    background: $theme;
    color: #fff;
    width: 100%;
    height: 88px/$ppr;
    line-height: 88px/$ppr;
    text-align: center;
    font-size: $num30;
  }

  #index_scroll_div{
    display: none;
    position: fixed;
    top: $num80;
    left: 0;
    background: rgba(255, 255, 255,0.5);
    height: $num60;
    line-height: $num60;
    overflow: hidden;
    white-space: nowrap;
    width: 100%;
    text-align: center;
    color: #333;
    font-size: $num28;
    z-index: 10;
  }
  #scroll_begin{position: absolute}

  .login{
    background: #f5f5f5;
    height: 100%;
    position: relative;
    .login-header{
      font-size: $num48;
      color: $theme;
      line-height:396px/$ppr;
      text-align: center;
    }
    .login-body{
      width: 690px/$ppr;
      margin: 0 auto;
      p{
        height: 98px/$ppr;
        line-height: 98px/$ppr;
        border-bottom: 1px solid #eee;
        position: relative;
        img{
          width: $num40;
        }
        img.fr{
          margin-right: 10px/$ppr;
          width: 156px/$ppr;
        }
        input{
          border: none;
          color: #333;
          line-height: 98px/$ppr;
          background: transparent;
          font-size:$num28;
          outline: none;
          margin-left: $num30;
        }
        input::-webkit-input-placeholder{
          color: #bbb;
        }
      }
      .login-submit,.reg-submit{
        display: block;
        width: 100%;
        font-size: $num28;
        text-align: center;
        background: $theme;
        color: #fff;
        height: $num80;
        line-height: $num80;
        border-radius: $num80;
        margin-top: $num30;
      }
      .reg{
        float: right;
        margin: $num28;
        color: $theme;
      }
    }
  }
  .layer_box{
    display: none;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    position: fixed;
    top: 0;
    &>div{
      position: relative;
      width: 700px/$ppr;
      margin: 240px/$ppr auto;
      background: #fff;
      border-radius: $num14;
      padding: $num80;
      &>p{
        font-size: $num36;
        font-weight: bold;
        color: #333;
        padding: 10px/$ppr $num20;
        margin-bottom: $num14;
        float: left;
      }
      .fr{
        padding: 10px/$ppr $num20;
        color: $theme;
      }
      span{
        display: block;
        color: #999;
        padding: $num20;
        font-size: $num24;
      }
      input{
        width: 100%;
        height: $num80;
        background: #e8e8e8;
        border: none;
        border-radius: 10px/$ppr;
        margin-bottom: $num20;
        padding: 0 $num20;
        &.captcha{
          width: 55%;
        }
      }
      .send{
        display: inline-block;
        width: 43%;
        line-height: $num60;
        text-align: center;
        background: $theme;
        color: #fff;
        border-radius: 10px/$ppr;
        font-size: $num24;
      }
      .denglu{
        display: block;
        width: 100%;
        line-height: $num80;
        text-align: center;
        background: $theme;
        color: #fff;
        border-radius: 10px/$ppr;
        margin-top: $num40;
        font-size: $num28;
      }
    }
  }

  .index{
    height: 100%;
    background: url("../image/background.jpg") no-repeat;
    background-size: 100% 100%;
    &>.activity{
      position: fixed;
      top: 140px/$ppr;
      right: -$num40;
      width: 220px/$ppr;
      line-height: $num60;
      padding: 0 $num20;
      font-size: $num24;
      background: #aa0231;
      color: #fff;
      border-radius: $num60;
      img{
        width: $num28;
        margin: 0 10px/$ppr;
        position: relative;
        top: -2px/$ppr;
      }
    }
    .title{
      position: fixed;
      top: 0;
      width: 100%;
      font-size: $num28;
      color: #fff;
      background: $theme;
      height: $num80;
      line-height: $num80;
      padding: 0 $num40;
    }
    .index_button{
      font-size: 0;
      position: absolute;
      top: 25%;
      left: 12%;
      width: 76%;
      a{
        display: inline-block;
        width: 50%;
        text-align: center;
        img{
          width: 78px/$ppr;
        }
      }
    }
  }

  .order{
    margin: 0;
    padding-top: 84px/$ppr;
    .title{
      font-size: $num36;
      color: #333;
      margin: 0 auto $num80;
      text-align: center;
    }
    a{
      display: block;
      margin: 0 auto $num36;
      width: 280px/$ppr;
      height: 280px/$ppr;
      line-height: 280px/$ppr;
      color: #fff;
      text-align: center;
      background: $theme;
      -webkit-border-radius: 10px/$ppr;
      -moz-border-radius: 10px/$ppr;
      border-radius: 10px/$ppr;
    }
  }

  #scroll_div{
    position: fixed;
    top: $num80;
    background: rgba(255,255,255,0.6);
    height: 58px/$ppr;
    line-height: 58px/$ppr;
    overflow: hidden;
    white-space: nowrap;
    width: 100%;
    color: #666;
    text-align: center;
    color: #666;
    font-size: $num24;
    z-index: 10;
    #scroll_begin,#scroll_end {
      display: inline;
    }
  }
  .cg_time{
    margin-top: $num40;
    .choose_date{
      height: 72px/$ppr;
      line-height: 72px/$ppr;
      background: #fff;
      color: #333;
      text-align: center;
      select{
        appearance:none;
        -moz-appearance:none;
        -webkit-appearance:none;
        border: none;
        font-size: $num28;
        line-height: 72px/$ppr;
        vertical-align: middle;
        background: #e5e5e5;
      }
      img{
        margin-left: $num30;
        width: $num28;
      }
    }
    .choose_time{
      padding: $num40 11px/$ppr 0;
      .s-title,.guan{
        padding: 0 20px/$ppr;
        margin-bottom: 20px/$ppr;
      }
      p{
        float: left;
        width: 316px/$ppr;
        height: 64px/$ppr;
        line-height: 64px/$ppr;
        -webkit-border-radius: 64px/$ppr;
        -moz-border-radius: 64px/$ppr;
        border-radius: 64px/$ppr;
        font-size: 26px/$ppr;
        text-align: center;
        color: #333;
        background: #e5e5e5;
        margin-bottom: 56px/$ppr;
        position: relative;
        span{
          position: absolute;
          bottom: -56px/$ppr;
          left: $num24;
          color: #999;
          font-size: 22px/$ppr;
        }
        &.hide{
          display: none;
        }
      }
      p:nth-child(odd){
        margin-left: 36px/$ppr;
      }
      p.select{
        background: $theme;
        color: #fff;
      }
      em{ color: #da7a00;}
    }
    .bguan,.guan{
      display: none;
      &.hide>p{

        display: none;
      }
    }
    .booked,.booked1{
      opacity: 0.5;
    }
  }

  .order_info{
    padding: 114px/$ppr $num30;
    .intro{
      padding: $num30;
      font-size: $num24;
      background: #e5e5e5;
      -webkit-border-radius: 8px/$ppr;
      -moz-border-radius: 8px/$ppr;
      border-radius: 8px/$ppr;
      margin-bottom: $num40;
      h1{
        font-size: $num30;
        font-weight: bold;
        margin-bottom: $num20;
      }
      p{
        line-height: 12px;
        em{
          color: #999;
          vertical-align: middle;
          line-height: 12px;
        }
      }
    }
    .s-title{
      padding: 0 0 16px/$ppr $num30;
    }
    a.send{
      display: inline-block;
      width: 43%;
      height: $num60;
      line-height: $num60;
      text-align: center;
      background: #f77b01;
      color: #fff;
      border-radius: 8px/$ppr;
    }
    span.orange{
      color: #f77b01;
    }
    input,select{
      width: 100%;
      height: 78px/$ppr;
      line-height: 78px/$ppr;
      background: #e5e5e5;
      color: #333;
      padding: 0 $num30;
      border: none;
      font-size: 26px/$ppr;
      -webkit-border-radius: 8px/$ppr;
      -moz-border-radius: 8px/$ppr;
      border-radius: 8px/$ppr;
      margin-bottom: $num40;
      &.code1{
        width: 50%;
        margin-right: 5%;
      }
      &.gerenx{
        //margin-bottom: 0;
      }
      &.cg_amount_input{
        width: 240px/$ppr;
      }
      &.w50{
        width: 50%;
      }
    }
    .select{
      position: relative;
      font-size: 0;
      select{
        appearance:none;
        -moz-appearance:none;
        -webkit-appearance:none;
      }
      img{
        width: $num24;
        position: relative;
        top: -4px/$ppr;
        left: -10px/$ppr;
      }
      &>img{
        position: absolute;
        right: $num30;
        left: unset;
        top: 78px/$ppr;
      }
      &.tuand>img{
        top: $num28;
      }
      .venue{
        display: inline-block;
        margin-right: 5%;
        height: 78px/$ppr;
        line-height: 78px/$ppr;
        background: #e5e5e5;
        color: #333;
        text-align: center;
        -webkit-border-radius: 8px/$ppr;
        -moz-border-radius: 8px/$ppr;
        border-radius: 8px/$ppr;
        font-size: 26px/$ppr;
        padding: 0 $num20;
        margin-bottom: $num40;
        &:last-child{
          margin-right: 0;
        }
        &.on{
          background: $theme;
          color: #fff;
        }
        &.w30{
          width: 30%;
          margin-bottom: $num40
        }
      }
      &.timePart,&.timePartb{
        display: none;
        width: 20%;
        float: left;
        a{
          width: 100%;
        }
      }
      &.arriveTime,&.arriveTimeb{
        display: none;
        float: left;
        width: 80%;
        select{
          width: 35%;
          margin-left: 5%;
          vertical-align: top;
        }
        span{
          font-size: $num30;
          margin-left: 4%;
          line-height: $num80;
          display: inline-block;
          vertical-align: middle;
        }
      }
    }
    .isExplain{
      .timePart,.arriveTime{
        display: block;
      }
    }
    .choose_date{
      position: relative;
      .explain1{
        appearance: none;
        -moz-appearance: none;
        -webkit-appearance: none;
      }
      img{
        position: absolute;
        right: $num30;
        left: unset;
        width: $num24;
        top: $num80;
      }
    }
  }

  .order_success{
    .code{
      text-align: center;
      margin: 210px/$ppr auto 90px/$ppr;
      font-size: $num26;
      color: #333;
      img{
        display: block;
        margin: 0 auto $num30;
        width: 286px/$ppr;
        height: 286px/$ppr;
        background: $theme;
      }
      span{
        display: block;
        color: $theme;
        margin-top: $num20;
        font-size: $num24;
      }
    }
    .detail{
      width: 690px/$ppr;
      margin: $num30 auto $num40;
      color: #333;
      font-size: $num26;
      background: #e8dfd6;
      -webkit-border-radius: $num14;
      -moz-border-radius: $num14;
      border-radius: $num14;
      padding: 38px/$ppr 48px/$ppr $num48;
      &>div{
        position: relative;
        width: 100%;
        margin: 0 auto;
        .pic{
          display: block;
          width: 100%;
        }
        .title{
          font-size: $num36;
          margin: $num40 0;
        }
        span{
          display: block;
          line-height: 32px/$ppr;
          margin-bottom: 12px/$ppr;
          &.last{
            margin-bottom: $num30;
          }
        }
        .fenduan{
          width: 710px/$ppr;
          position: absolute;
          left: -58px/$ppr;
          margin: $num20 0;
        }
        .notice{
          margin-top: 132px/$ppr;
          p{
            font-size: $num30;
            margin-bottom: 16px/$ppr;
          }
          span{
            font-size: $num24;
            line-height: $num48;
            margin: 0;
          }
        }
      }
    }
    .button{
      width: 80%;
      margin: 0 auto 10%;
      text-align: center;
      a{
        width: 40%;
        display: inline-block;
        text-align: center;
        background: #bbb;
        color: #fff;
        height: $num60;
        line-height: $num60;
        border-radius: 8px/$ppr;
        &.edit{
          margin-left: 10%;
          background: #aa0231;
        }
      }
    }
  }
  .my_order{
    width: 690px/$ppr;
    margin: 0 auto;
    height: 100%;
    overflow: scroll;
    padding-bottom: $num80;
    .orderlist_type{
      width: 100%;
      text-align: center;
      min-height: $num60;
      background: transparent;
      a{
        display: inline-block;
        width: 30%;
        height: $num60;
        line-height: $num60;
        color: #fff;
        background: #ccc;
        border-radius: 10px/$ppr;
        &.exhi{
          margin-right: 10%;
        }
        &.select{
          background: #aa0231;
        }
      }
    }
    &>div{
      width: 100%;
      min-height: 240px/$ppr;
      background: #fff;
      -webkit-border-radius: 10px/$ppr;
      -moz-border-radius: 10px/$ppr;
      border-radius: 10px/$ppr;
      margin-top: $num24;
      .top_time{
        width: 622px/$ppr;
        padding: 0 6px/$ppr;
        height: 74px/$ppr;
        line-height: 74px/$ppr;
        border-bottom: 1px solid #f1f1f1;
        margin: 0 auto;
      }
      .detail{
        width: 610px/$ppr;
        margin: 0 auto;
        a{
          float: left;
          margin-top: 52px/$ppr;
          width: 120px/$ppr;
          height: 50px/$ppr;
          line-height: 50px/$ppr;
          -webkit-border-radius: 50px/$ppr;
          -moz-border-radius: 50px/$ppr;
          border-radius: 50px/$ppr;
          border: 1px solid $theme;
          color: $theme;
          text-align: center;
        }
        a.finish{
          color: #999;
          border-color: #999;
        }
        .order_d{
          margin-left: 166px/$ppr;
          padding: $num36 0;
          .name{
            font-size: $num30;
            line-height: $num40;
          }
          .time{
            font-size: $num26;
            line-height: $num26;
            margin-top: 28px/$ppr;
          }
        }
      }
    }
  }
  .order_detail{
    padding: 84px/$ppr $num30;
    .s-title{
      padding: $num36 $num30 $num16;
    }
    select,input{
      width: 100%;
      height: 78px/$ppr;
      color: #333;
      background: #e5e5e5;
      border:none;
      -webkit-border-radius: 8px/$ppr;
      -moz-border-radius: 8px/$ppr;
      border-radius: 8px/$ppr;
      padding: 0 $num30;
      appearance:none;
      -moz-appearance:none;
      -webkit-appearance:none;
    }
    .box{
      position: relative;
      img{
        width: $num30;
        position: absolute;
        right:$num30;
        top: $num24;
      }
      .time{
        position: relative;
        width: 330px/$ppr;
        float: left;
        &:first-child{
          margin-right: $num30;
        }
      }
      span{
        position: absolute;
        right: 0;
        bottom: -$num30;
        color: $theme;
      }
    }
  }

  .comment{
    height: 100%;
    position: relative;
    textarea{
      display: none;
      font-size: $num30;
      width: 90%;
      padding: 32px/$ppr $num40;
      border: 1px solid #ccc;
      background: transparent;
      outline: none;
      border-radius: 8px/$ppr;
      margin: 0 auto;
    }
    .star{
      padding: 0 $num40;
      font-size: $num28;
      height: 200px/$ppr;
      line-height: 200px/$ppr;
      span{
        margin-right: $num20;
      }
      i{
        display: inline-block;
        width: $num28;
        height: $num28;
        background: url("../image/star-1.png") no-repeat;
        background-size: 100% 100%;
        margin-right: $num48;
        vertical-align: middle;
      }
      i.current{
        background: url("../image/star-2.png") no-repeat;
        background-size: 100% 100%;
      }
    }
    .comment_button{
      display: none;
      padding: 0 $num80;
      font-size: 0;
      a{
        display: inline-block;
        width: 45%;
        text-align: center;
        height: $num80;
        line-height: $num80;
        border: 1px solid rgba(170,2,49,0.3);
        font-size: $num28;
        margin-bottom: $num40;
        border-radius: 8px/$ppr;
        &:nth-child(odd){
          margin-right: 10%;
        }
        &.on{
          border-color: $theme;
        }
      }
    }
  }

  .rule{
    padding: 140px/$ppr $num60;
    font-size: $num28;
    line-height: $num48;
    a{
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 84px/$ppr;
      line-height: 84px/$ppr;
      background: $theme;
      text-align: center;
      color: #fff;
      font-size: $num30;
      z-index: 1;
    }
  }

  .activity_list{
    padding: 114px/$ppr $num30;
    &>div{
      position: relative;
      color: #333;
      width: 100%;
      margin-bottom: 56px/$ppr;
      img{
        width: 100%;
        height: 360px/$ppr;
      }
      .countdown{
        position: absolute;
        right: -4px/$ppr;
        top: $num20;
        height: 56px/$ppr;
        line-height: 56px/$ppr;
        background: #f77a00;
        color: #fff;
        font-size: $num24;
        padding: 0 $num36;
        &.finish{
          background: #999;
        }
      }
      .title{
        font-size: 32px/$ppr;
        font-weight: bold;
        margin: $num36 0 $num20;
      }
      &>div{
        font-size: $num24;
        margin-bottom: $num20;
        span{
          color: #999;
          line-height: $num24;
        }
        em{
          vertical-align: middle;
        }
        &>div{
          width: 100%;
          padding: $num20;
          img{
            display: block;
            max-width: 100%;
          }
        }
      }
    }
  }
}